<!DOCTYPE HTML>
<html  lang="zh" xmlns:th="http://www.thymeleaf.org">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<link rel="stylesheet" href="https://unpkg.com/blueimp-file-upload@9.31.0/css/jquery.fileupload.css">
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-proBanner-add">
                <div class="form-group">
                    <label class="col-sm-3 control-label">图片：</label>
                    <div class="col-sm-8">
                        <!-- The fileinput-button span is used to style the file input field as button -->
                        <span class="btn btn-success fileinput-button">
						        <i class="glyphicon glyphicon-plus"></i>
						        <span>选择图片...</span>
                            <!-- The file input field used as target for the file upload widget -->
						        <input id="fileupload" type="file" name="file" multiple>
						        <input id="filePath" type="text" name="pbUrl" style="display: none">
						    </span>
                        <br>
                        <br>
                        <!-- The container for the uploaded files -->
                        <div id="files" class="files">
                            <div>
                                <img alt="" width="200px" id="url">
                            </div>
                        </div>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">是否启用</label>
                    <div class="col-sm-8">
                        <label class="radio-inline">
                            <input name="pbEnable" type="radio" checked value="1">启用
                        </label>
                        <label class="radio-inline">
                            <input name="pbEnable" type="radio" value="0" >禁用
                        </label>
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">外链接：</label>
                    <div class="col-sm-8">
                        <input id="pbLink" name="pbLink" class="form-control" type="text">
                    </div>
                </div>
                <div class="form-group">
                    <label class="col-sm-3 control-label">排序：</label>
                    <div class="col-sm-8">
                        <input id="pbSort" name="pbSort" class="form-control" type="text">
                    </div>
                </div>
        <div class="form-group">
            <div class="form-control-static col-sm-offset-9">
                <button type="submit" class="btn btn-primary">提交</button>
                <button th:onclick="'javascript:layer_close()'" class="btn btn-danger" type="button">关闭</button>
            </div>
        </div>
    </form>
</div>
<div th:include="include::footer"></div>
<script src="/reasahi/js/jquery.ui.widget.js" th:src="@{/reasahi/js/jquery.ui.widget.js}"></script>
<script src="/reasahi/js/jquery.fileupload.js" th:src="@{/reasahi/js/jquery.fileupload.js}"></script>
<script type="text/javascript">
    $(function(){
        // Change this to the location of your server-side upload handler:
        var url = "/api/fileupload/upload";

        $('#fileupload').fileupload({
            url: url,
            dataType: 'json',
            done: function (e, data) {
                console.log(data);
                if(data.result.code == 0){
                    var imageUrl= data.result.msg;
                    $('#filePath').val(imageUrl);
                    $('#url').attr('src', imageUrl);
                }
            }
        }).prop('disabled', !$.support.fileInput)
            .parent().addClass($.support.fileInput ? undefined : 'disabled');
    })
</script>
<script src="/reasahi/manage/proBanner/add.js" th:src="@{/reasahi/manage/proBanner/add.js}">
</script>
</body>
</html>